<template>
  <div class="rankListBottom">
    <!-- <button class="rankListBottom_left">
      <p>每日基础 2 次</p>
      <p style="padding-bottom:0.12rem;">邀请得 {{baseInfo.baseTimes-2}} 次</p>
    </button> -->
    <button class="rankListBottom_GO">
      <!-- <p class="lessNum">{{baseInfo.answerTimes}}/{{baseInfo.baseTimes}}</p> -->
    </button>
    <!-- <button class="rankListBottom_right" v-if="baseInfo.isShare === 1" @click="toShowOff"></button>
    <button class="rankListBottom_right2" v-else-if="baseInfo.isShare === 0" @click="toShowOff"></button> -->
  </div>
</template>

<script>
import {lessChance} from '../request/question'
import {mapGetters} from 'vuex'
import {Indicator, Toast} from 'mint-ui'
export default {
  name: 'rankListBottom',
  data () {
    return {
      key: '',
      // canStart: true,
      isWechat: false
    }
  },
  props: {
    baseInfo: {
      type: Object
    //   default: {
    //     allCorrectAnswer: 0,
    //     answerTimes: 0,
    //     baseTimes: 2,
    //     dailyCorrectAnswer: 0,
    //     id: 0,
    //     team: 0
    //   }
    },
    canStart: {
      type: Boolean
    },
    t: {
      type: String
    }
  },
  methods: {
    readyGo () {
      let time = (new Date()).getHours()
      let min = (new Date()).getMinutes()
      if ((time >= 21 && min > 58) || time >= 22) {
        return Toast({
          message: '答题时间结束了,请明天再来',
          duration: 1500
        })
      }
      if (!this.canStart) {
        this.toShowOff()
      } else {
        this.myFriendList = []
        Indicator.open({
          text: '准备题目中...',
          spinnerType: 'fading-circle'
        })
        lessChance({tokenString: this.t}).then((data) => {
          this.$store.dispatch('changeStartAnswer', true)
          this.$store.dispatch('updateChance')
          this.$store.dispatch('changeinitRankList', 1)
          Indicator.close()
          this.$router.push({name: 'Question'})
        })
      }
    },
    toShowOff () {
      this.$emit('toShowOff')
    }
  },
  mounted () {
    // if (this.baseInfo.answerTimes <= 0) {
    //   this.canStart = false
    // }
    let clientHeight = document.body.clientHeight
    let screenHeight = window.screen.height
    if (clientHeight < screenHeight) {
      this.isWechat = true
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  }
}
</script>

<style scoped>
.rankListBottom{
  height: 1.2rem;
  width: 100%;
  background: url('../assets/bg_rankList_bottom.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.rankListBottom_left{
  position: absolute;
  /* border:1px solid red; */
  top:50%;
  transform: translateY(-55%);
  background: url('../assets/btn_rankList_left.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 35%;
  height: 0.9rem;
  text-align: left;
  font-size: 0.24rem;
  color: #aa8a8a;
}
.rankListBottom_right{
  position: absolute;
  /* border:1px solid red; */
  top:50%;
  right: 0;
  transform: translateY(-55%);
  background: url('../assets/btn_rankList_invite.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 35%;
  height: 0.9rem;
  text-align: left;
  font-size: 0.2rem;
  padding:0;
}
.rankListBottom_right2{
  position: absolute;
  /* border:1px solid red; */
  top:50%;
  right: 0;
  transform: translateY(-55%);
  background: url('../assets/btn_getTimesSoon.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 35%;
  height: 0.9rem;
  text-align: left;
  font-size: 0.2rem;
  padding:0;
}
p{
  text-indent: 0.5em;
  line-height: 0.25rem;
}
.rankListBottom_GO{
  width: 1.5rem;
  height: 1.5rem;
  /* background: url('../assets/btn_rankList_go.png'); */
  background: url('../assets/btn_activityEnd.png');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: -0.5rem;
  left:50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  font-weight: 600;
  font-size: 0.2rem;
}
.lessNum{
  margin-top:0.5rem;
  padding-right:0.15rem;
}
</style>
